<template>
   <div>Son1<GrandsonVue/>
        <div class="box" :v-bind="{show:visible}">
            这是一个弹窗
            <div><button @click="turnOff">隐藏</button></div>
            <div class="chart" ref="xx"></div>
        </div>

</div>

    
</template>

<script>
import GrandsonVue from './Grandson.vue'
export default {
    name: 'Son1',
    mounted(){
        const chart1 = document.querySelector('.chart')
        chart1.innerHTML='this is inner'
        this.$refs.xx.innerHTML='this is inn'
    },
    components:{
        GrandsonVue:GrandsonVue
    },
    methods:{
        turnOff(){
            this.$emit('disavisible',false);
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: true,
        },
    },
}
</script>

<style>
    .box {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        text-align: center;
    }
    .show {
        display: block;
    }
    .noShow {
        display: none;
    }
</style>